<template>
  <div class="flex category bg-c-base">
    <div
      @mouseover="hoverIndex = i"
      @mouseout="hoverIndex = -1"
      @click="activatedIndex=i"
      :style="[hoverIndex == i ? hoverColors : '',activatedIndex == i ? activatedColors : '']"
      class="category-item flex-1 flex align-center justify-center"
      v-for="(item, i) in data"
      :key="i"
    >
      {{ item }}
    </div>
  </div>
</template>


<script>
import  {ref, computed, onUnmounted} from 'vue';
export default {
	props : {
		data : Array,
		activatedBg : {
			type : String,
			default : '#c5fb79'
		},
		activatedColor : {
			type : String,
			default : '#000'
		},
		hoverBg : {
			type : String,
			default : '#008cff'
		},
		hoverColor : {
			type : String,
			default : '#fff'
		}
	},
	setup (ctx) {
		let hoverIndex = ref(-1);
		let activatedIndex = ref(0);
		let task = null;

		let hoverColors =  computed(()=>{
			return `background:${ctx.hoverBg};color:${ctx.hoverColor};`; 
		});

    	let activatedColors =  computed(()=>{
			return `background:${ctx.activatedBg};color:${ctx.activatedColor};`; 
		});

		task = setInterval(()=>{
			if (activatedIndex.value===ctx.data.length-1){
				activatedIndex.value = 0;
			} else {
				activatedIndex.value = ++activatedIndex.value;
			}
		},3000);

		onUnmounted(()=>{
			clearInterval(task);
		});
    

		return {
			hoverIndex,
			activatedIndex,
			hoverColors,
			activatedColors
		};
	},
};
</script>

<style lang="scss" scoped>
.category {
  height: 48px;
  margin-bottom: 20px;
}
.category-item {
  font-size: 24px;
  color: #90a0ae;
}
</style>
